import React from 'react'
import './login.css'
import { Select, Input, Button, message, Space } from 'antd'
import { useNavigate, Link } from 'react-router-dom';
import { useState } from 'react';

const handleChange = (value) => {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
};
export default function Login() {
    let arr = [
        {
            value: 'china',
            label: '中国+86'
        },
        {
            value: '',
            label: '中国+86'
        },
        {
            value: '',
            label: '中国+86'
        },
        {
            value: '',
            label: '中国+86'
        },
        {
            value: '',
            label: '中国+86'
        },

    ];

    let nav = useNavigate()

    let [phone, setPhone] = useState('')
    let [pwd, setPwd] = useState('')
    let user = [
        {
            phone: '123456',
            pwd: '123456'
        }
    ]
    const [messageApi, contextHolder] = message.useMessage();
    const success = () => {
        messageApi.open({
            type: 'success',
            content: '登录成功',
        });
    };
    const error = () => {
        messageApi.open({
            type: 'error',
            content: '手机号或密码错误',
        });
    };

    return (
        <>
            <div className='login-layout'>
                {contextHolder}
                <div>
                    <img src={require('../../static/images/logo.png')} alt="" />
                </div>
                <div>
                    <ul>
                        <li>
                            <h3>登录</h3>
                        </li>
                        <li>
                            <Select
                                labelInValue
                                defaultValue={{
                                    value: 'china',
                                    label: '中国+86',
                                }}
                                style={{
                                    width: 96,
                                    height: 36
                                }}
                                onChange={handleChange}
                                options={arr}
                            />
                            <Input
                                style={{
                                    width: 240,
                                    height: 36
                                }}
                                placeholder="请输入手机号"
                                type='number'
                                value={phone}
                                onChange={(e) => { setPhone(e.target.value) }}
                            />
                        </li>
                        <li>
                            <Input.Password
                                style={{
                                    width: 345,
                                    height: 36
                                }}
                                placeholder="请输入密码"
                                value={pwd}
                                onChange={(e) => {
                                    setPwd(e.target.value)
                                    console.log(e.target.value);
                                }}
                            />
                        </li>
                        <li>
                            <Button
                                style={{
                                    width: 345,
                                    height: 36,
                                    background: '#8479E3',
                                    color: '#fff'
                                }}
                                onClick={() => {
                                    if (phone === user[0].phone && pwd === user[0].pwd) {
                                        success()
                                        localStorage.setItem('token', '1234567890')
                                        nav('/')

                                    } else {
                                        setPhone('')
                                        setPwd('')
                                        error()
                                    }
                                }}
                            >登录</Button>
                        </li>
                        <li>
                            <span><Link to="/forgetpwd" className='aa'>忘记密码</Link></span>
                            <span><Link to="/register" className='aa'>免费注册</Link></span>
                        </li>
                    </ul>
                    <div>
                        <img src={require('../../static/images/wt.png')} alt="" />
                    </div>
                </div>
                <div>
                    <p>2018-2019 北京乐闻诺科技有限公司 京ICP备19041303号</p>
                </div>
            </div>
        </>
    )
}
